<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统设置 - 个人财务管理系统</title>
    <!-- 引入Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入自定义CSS -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
            <a class="navbar-brand" href="{{ url_for('index') }}">个人财务管理系统</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('index') }}">交易管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('reports') }}">财务报表</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="{{ url_for('budget') }}">预算管理</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" aria-current="page" href="{{ url_for('settings') }}">设置</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="container mt-5">
        <h2>系统设置</h2>

        <!-- 消息提示区域 -->
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                {% for category, message in messages %}
                    <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
                        {{ message }}
                        <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                    </div>
                {% endfor %}
            {% endif %}
        {% endwith %}

        <div class="row">
            <!-- 侧边栏导航 -->
            <div class="col-md-3">
                <div class="card">
                    <div class="card-header">
                        <h3>设置选项</h3>
                    </div>
                    <div class="list-group">
                        <a href="#general-settings" class="list-group-item list-group-item-action active">通用设置</a>
                        <a href="#category-settings" class="list-group-item list-group-item-action">分类管理</a>
                        <a href="#data-management" class="list-group-item list-group-item-action">数据管理</a>
                    </div>
                </div>
            </div>

            <!-- 设置内容区域 -->
            <div class="col-md-9">
                <!-- 通用设置 -->
                <div id="general-settings" class="card mb-5">
                    <div class="card-header">
                        <h3>通用设置</h3>
                    </div>
                    <div class="card-body">
                        <form method="POST" action="{{ url_for('save_settings') }}">
                            <div class="mb-3">
                                <label for="currency" class="form-label">货币单位</label>
                                <select id="currency" name="currency" class="form-select">
                                    <option value="CNY" {% if settings.currency == 'CNY' %}selected{% endif %}>人民币 (¥)</option>
                                    <option value="USD" {% if settings.currency == 'USD' %}selected{% endif %}>美元 ($)</option>
                                    <option value="EUR" {% if settings.currency == 'EUR' %}selected{% endif %}>欧元 (€)</option>
                                    <option value="GBP" {% if settings.currency == 'GBP' %}selected{% endif %}>英镑 (£)</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="date_format" class="form-label">日期格式</label>
                                <select id="date_format" name="date_format" class="form-select">
                                    <option value="YYYY-MM-DD" {% if settings.date_format == 'YYYY-MM-DD' %}selected{% endif %}>YYYY-MM-DD</option>
                                    <option value="DD/MM/YYYY" {% if settings.date_format == 'DD/MM/YYYY' %}selected{% endif %}>DD/MM/YYYY</option>
                                    <option value="MM/DD/YYYY" {% if settings.date_format == 'MM/DD/YYYY' %}selected{% endif %}>MM/DD/YYYY</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="decimal_places" class="form-label">小数位数</label>
                                <select id="decimal_places" name="decimal_places" class="form-select">
                                    <option value="0" {% if settings.decimal_places == 0 %}selected{% endif %}>0位小数</option>
                                    <option value="1" {% if settings.decimal_places == 1 %}selected{% endif %}>1位小数</option>
                                    <option value="2" {% if settings.decimal_places == 2 %}selected{% endif %}>2位小数</option>
                                    <option value="3" {% if settings.decimal_places == 3 %}selected{% endif %}>3位小数</option>
                                </select>
                            </div>
                            <button type="submit" class="btn btn-primary">保存设置</button>
                        </form>
                    </div>
                </div>

                <!-- 分类管理 -->
                <div id="category-settings" class="card mb-5">
                    <div class="card-header d-flex justify-content-between align-items-center">
                        <h3>分类管理</h3>
                        <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addCategoryModal">
                            <i class="fa fa-plus"></i> 添加分类
                        </button>
                    </div>
                    <div class="card-body">
                        <!-- 收入分类 -->
                        <div class="mb-5">
                            <h4>收入分类</h4>
                            {% if income_categories %}
                                <div class="table-responsive">
                                    <table class="table table-hover">
                                        <thead class="table-primary">
                                            <tr>
                                                <th>分类名称</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for category in income_categories %}
                                                <tr>
                                                    <td>{{ category.name }}</td>
                                                    <td>
                                                        <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#editCategoryModal" 
                                                                data-id="{{ category.id }}" data-name="{{ category.name }}" data-type="income">
                                                            <i class="fa fa-pencil"></i> 编辑
                                                        </button>
                                                        {% if category.id > 5 %} <!-- 保留默认分类 -->\                                                            <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#deleteCategoryModal" 
                                                                    data-id="{{ category.id }}" data-name="{{ category.name }}">
                                                                <i class="fa fa-trash"></i> 删除
                                                            </button>
                                                        {% endif %}
                                                    </td>
                                                </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            {% else %}
                                <p class="text-muted">暂无收入分类数据</p>
                            {% endif %}
                        </div>

                        <!-- 支出分类 -->
                        <div>
                            <h4>支出分类</h4>
                            {% if expense_categories %}
                                <div class="table-responsive">
                                    <table class="table table-hover">
                                        <thead class="table-primary">
                                            <tr>
                                                <th>分类名称</th>
                                                <th>操作</th>
                                            </tr>
                                        </thead>
                                        <tbody>
                                            {% for category in expense_categories %}
                                                <tr>
                                                    <td>{{ category.name }}</td>
                                                    <td>
                                                        <button type="button" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#editCategoryModal" 
                                                                data-id="{{ category.id }}" data-name="{{ category.name }}" data-type="expense">
                                                            <i class="fa fa-pencil"></i> 编辑
                                                        </button>
                                                        {% if category.id > 10 %} <!-- 保留默认分类 -->\                                                            <button type="button" class="btn btn-danger btn-sm" data-bs-toggle="modal" data-bs-target="#deleteCategoryModal" 
                                                                    data-id="{{ category.id }}" data-name="{{ category.name }}">
                                                                <i class="fa fa-trash"></i> 删除
                                                            </button>
                                                        {% endif %}
                                                    </td>
                                                </tr>
                                            {% endfor %}
                                        </tbody>
                                    </table>
                                </div>
                            {% else %}
                                <p class="text-muted">暂无支出分类数据</p>
                            {% endif %}
                        </div>
                    </div>
                </div>

                <!-- 数据管理 -->
                <div id="data-management" class="card">
                    <div class="card-header">
                        <h3>数据管理</h3>
                    </div>
                    <div class="card-body">
                        <div class="alert alert-warning" role="alert">
                            <i class="fa fa-exclamation-triangle"></i> 警告：数据删除操作无法恢复，请谨慎操作！
                        </div>
                        
                        <div class="mb-5">
                            <h4>备份与恢复</h4>
                            <div class="row">
                                <div class="col-md-6">
                                    <a href="{{ url_for('export_data') }}" class="btn btn-primary btn-block mb-2">
                                        <i class="fa fa-download"></i> 导出数据
                                    </a>
                                    <p class="text-muted text-sm">将所有数据导出为CSV文件</p>
                                </div>
                                <div class="col-md-6">
                                    <form method="POST" action="{{ url_for('import_data') }}" enctype="multipart/form-data">
                                        <div class="input-group mb-2">
                                            <input type="file" class="form-control" name="file" accept=".csv" required>
                                            <button type="submit" class="btn btn-success">
                                                <i class="fa fa-upload"></i> 导入数据
                                            </button>
                                        </div>
                                    </form>
                                    <p class="text-muted text-sm">从CSV文件导入数据（会覆盖现有数据）</p>
                                </div>
                            </div>
                        </div>

                        <div>
                            <h4>数据清理</h4>
                            <button type="button" class="btn btn-danger mb-2" data-bs-toggle="modal" data-bs-target="#clearDataModal">
                                <i class="fa fa-trash"></i> 清空所有数据
                            </button>
                            <p class="text-muted text-sm">此操作将删除所有交易数据，分类和设置不会被删除</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加分类模态框 -->
    <div class="modal fade" id="addCategoryModal" tabindex="-1" aria-labelledby="addCategoryModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addCategoryModalLabel">添加分类</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="POST" action="{{ url_for('add_category') }}">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="category-type" class="form-label">分类类型</label>
                            <select id="category-type" name="type" class="form-select" required>
                                <option value="income">收入</option>
                                <option value="expense">支出</option>
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="category-name" class="form-label">分类名称</label>
                            <input type="text" id="category-name" name="name" class="form-control" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-success">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 编辑分类模态框 -->
    <div class="modal fade" id="editCategoryModal" tabindex="-1" aria-labelledby="editCategoryModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="editCategoryModalLabel">编辑分类</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="POST" action="{{ url_for('edit_category') }}">
                    <input type="hidden" id="edit-category-id" name="id" value="">
                    <input type="hidden" id="edit-category-type" name="type" value="">
                    <div class="modal-body">
                        <div class="mb-3">
                            <label for="edit-category-name" class="form-label">分类名称</label>
                            <input type="text" id="edit-category-name" name="name" class="form-control" required>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-primary">更新</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 删除分类模态框 -->
    <div class="modal fade" id="deleteCategoryModal" tabindex="-1" aria-labelledby="deleteCategoryModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="deleteCategoryModalLabel">删除分类</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <form method="POST" action="{{ url_for('delete_category') }}">
                    <input type="hidden" id="delete-category-id" name="id" value="">
                    <div class="modal-body">
                        <p>确定要删除分类 <strong id="delete-category-name"></strong> 吗？</p>
                        <p class="text-warning">提示：与该分类相关的交易将被归类到"其他"分类</p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                        <button type="submit" class="btn btn-danger">删除</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <!-- 清空数据模态框 -->
    <div class="modal fade" id="clearDataModal" tabindex="-1" aria-labelledby="clearDataModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="clearDataModalLabel">清空所有数据</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-danger" role="alert">
                        <i class="fa fa-exclamation-circle"></i> 确认要清空所有交易数据吗？此操作无法撤销！
                    </div>
                    <p>请输入 "确认清空" 以继续操作：</p>
                    <input type="text" id="confirm-text" class="form-control mb-3" placeholder="确认清空">
                    <p class="text-warning">注意：分类数据和系统设置不会被删除</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-danger" id="confirm-clear-data">确认清空</button>
                </div>
            </div>
        </div>
    </div>

    <!-- 引入Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 引入自定义JS -->
    <script src="{{ url_for('static', filename='js/main.js') }}"></script>

    <script>
        // 页面加载完成后执行
        document.addEventListener('DOMContentLoaded', function() {
            // 编辑分类模态框数据绑定
            const editCategoryModal = document.getElementById('editCategoryModal');
            editCategoryModal.addEventListener('show.bs.modal', function(event) {
                const button = event.relatedTarget;
                const id = button.getAttribute('data-id');
                const name = button.getAttribute('data-name');
                const type = button.getAttribute('data-type');
                
                document.getElementById('edit-category-id').value = id;
                document.getElementById('edit-category-name').value = name;
                document.getElementById('edit-category-type').value = type;
            });

            // 删除分类模态框数据绑定
            const deleteCategoryModal = document.getElementById('deleteCategoryModal');
            deleteCategoryModal.addEventListener('show.bs.modal', function(event) {
                const button = event.relatedTarget;
                const id = button.getAttribute('data-id');
                const name = button.getAttribute('data-name');
                
                document.getElementById('delete-category-id').value = id;
                document.getElementById('delete-category-name').textContent = name;
            });

            // 确认清空数据
            document.getElementById('confirm-clear-data').addEventListener('click', function() {
                const confirmText = document.getElementById('confirm-text').value;
                if (confirmText === '确认清空') {
                    window.location.href = '{{ url_for('clear_data') }}';
                } else {
                    alert('请输入正确的确认文本');
                }
            });

            // 平滑滚动
            document.querySelectorAll('a[href^="#"]').forEach(anchor => {
                anchor.addEventListener('click', function(e) {
                    e.preventDefault();
                    const targetId = this.getAttribute('href');
                    const targetElement = document.querySelector(targetId);
                    if (targetElement) {
                        targetElement.scrollIntoView({ behavior: 'smooth' });
                        // 更新激活状态
                        document.querySelectorAll('.list-group-item').forEach(item => {
                            item.classList.remove('active');
                        });
                        this.classList.add('active');
                    }
                });
            });
        });
    </script>
</body>
</html>